import React from 'react';
import {Layout, Icon, Row, Col, Button, Modal } from 'antd';
import { connect } from "dva";
import logo from '@/assets/logo_max.png';
import logo_min from '@/assets/logo_min.png';
import SiderMenu from '@/components/SiderMenu';
import Login from '@/pages/user/Login';
import request from "@/utils/requestUtils";

const { Header, Content, Footer, Sider } = Layout;

class App extends React.Component {

    state = {
        collapsed: false,
    };

    onCollapse = collapsed => {
        this.setState({ collapsed });
    }

    handleLogout = () => {
        request("/api/logout", {
            method : "post",
            data : {
                username : this.props.user.username,
            },
            responseType : "json",
        }).then(res => {
            if(res.code !== 0) {
                //保存所有菜单信息
                this.props.dispatch({
                    type: 'session/setStatus',
                    status: "anno",
                });
            } else {
                Modal.warning({
                    title : "系统通知",
                    content : res.msg,
                });
            }
        });
    }

    render() {
        const { collapsed } = this.state;
        const logoClass = {
            top: '50%',
            left: '50%',
            height: 50,
            position : "absolute",
            transform : 'translate(-50%, -47%)',
        };
        const logoImg = <img src={collapsed ? logo_min : logo} alt={"founder"} style={{width: collapsed ? 55 : 160, ...logoClass}} />;

        return !this.props.isLogon ? (
            <Layout style={{ minHeight: '100vh' }}>
                <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
                    <div style={{height:64, position : "relative"}} >{logoImg}</div>
                    <SiderMenu collapsed={collapsed} />
                </Sider>
                <Layout>
                    <Header style={{ background: '#f3f3f4', padding: 0 }} >
                        <Row>
                            <Col span={12}>
                                <Icon type="flag" style={{padding : "0 15px", color : "#1890ff", fontSize : 23}}/>
                                <span style={{fontSize : 22}}>{window.GLOBAL.PROJECT_NAME}</span>
                            </Col>
                            <Col>
                                <span style={{fontSize : 15, float: "right", paddingRight: 40}}>您好，{this.props.user.username} &emsp;<Button type="primary" onClick={this.handleLogout} ghost>退出</Button></span>
                            </Col>
                        </Row>
                    </Header>
                    <Content style={{ margin: '0 0px', backgroundColor : '#f9f9f9' }}>
                        {this.props.children}
                    </Content>
                    <Footer style={{ textAlign: 'center', padding : "8px 0px" }}>
                        Copyright © 2019 All Rights Reserved 光何集团
                    </Footer>
                </Layout>
            </Layout>
        ) : (
            <Login />
        );
    }
}

export default connect(({ session }) => ({
    isLogon : session.status === "on",
    user : session.user
}))(App);

